<template>
<div>
    
    <el-button type="primary" style="margin-bottom: 10px;" @click="addRow ">新增商品</el-button>
    <!-- 商品列表 -->
    <el-table :data="goodsList" style="width: 100%; margin-bottom: 20px" row-key="id" border default-expand-all>
        <el-table-column prop="id" label="商品编号" width="100" />
        <el-table-column prop="name" label="商品名称" width="260" />
        <el-table-column prop="price" label="商品价格" width="100" />
        <el-table-column prop="stock" label="商品库存" width="100" />
        <el-table-column prop="description" label="商品简介" />
        <el-table-column prop="picture" label="商品图片" width="120">
            <template #default="{ row }">
                <el-image v-if="row.picture != ''" :src="row.picture" fit="contain" style="display: flex; align-items: center; height: 60px;" />
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
            <template #default="{ row }">
                <el-button type="warning" @click="editRow(row)">编辑</el-button>
                <el-button type="danger" @click="delRow(row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="page" background layout="prev, pager, next" :total="total" :page-size="pagesize" @current-change="handleCurrentChange" style="margin-bottom: 50px;" />
</div>
</template>

   
<script setup>
// 新增商品
const addRow = () => {
    
}
// 修改商品
const editRow = row => {}
// 删除商品
const delRow = row => {}
// 换页
const handleCurrentChange = value => {
    // page.value = value
    // loadGoodsList()
}
</script>
